<div class="frame" [style.background]="'rgba(0,0,0,' + opacity + ')'">
    <app-item-frame-header [item]="item" [queryItem]="queryItem"
        [queryable]="item.rarity === 'normal' || item.rarity === 'magic' || item.rarity === 'rare'"
        [language]="language">
    </app-item-frame-header>
    <div class="detail">
        <div class="inner">
            <!-- properties -->
            <ng-container *ngIf="item.properties && (!properties || properties.length)">
                <app-item-frame-properties [item]="item" [queryItem]="queryItem" [language]="language"
                    [properties]="properties" [minRange]="propertyMinRange" [maxRange]="propertyMaxRange"
                    appAnnotation="evaluate.properties">
                </app-item-frame-properties>
                <ng-content select="properties"></ng-content>
                <app-item-frame-separator [item]="item"
                    *ngIf="req || sockets || stats || state || influences || separator">
                </app-item-frame-separator>
            </ng-container>

            <!-- requirements -->
            <ng-container *ngIf="req">
                <app-item-frame-level-requirements [item]="item" [queryItem]="queryItem" [language]="language">
                </app-item-frame-level-requirements>
                <app-item-frame-separator [item]="item" *ngIf="sockets || stats || state || influences || separator">
                </app-item-frame-separator>
            </ng-container>

            <!-- sockets -->
            <ng-container *ngIf="sockets">
                <app-item-frame-sockets [item]="item" [queryItem]="queryItem"></app-item-frame-sockets>
                <app-item-frame-separator [item]="item" *ngIf="stats || state || influences || separator">
                </app-item-frame-separator>
            </ng-container>

            <!-- stats -->
            <ng-container *ngIf="stats">
                <app-item-frame-stats [item]="item" [queryItem]="queryItem" [language]="language"
                    [modifierMinRange]="modifierMinRange" [modifierMaxRange]="modifierMaxRange"
                    appAnnotation="evaluate.stats"></app-item-frame-stats>
                <app-item-frame-separator [item]="item" *ngIf="state || influences || separator">
                </app-item-frame-separator>
            </ng-container>

            <!-- veiled / corrupted -->
            <ng-container *ngIf="state">
                <app-item-frame-state [item]="item" [queryItem]="queryItem" [language]="language">
                </app-item-frame-state>
                <app-item-frame-separator [item]="item" *ngIf="influences || separator">
                </app-item-frame-separator>
            </ng-container>

            <!-- influences -->
            <ng-container *ngIf="influences">
                <app-item-frame-influences [item]="item" [queryItem]="queryItem" [language]="language">
                </app-item-frame-influences>
                <app-item-frame-separator [item]="item" *ngIf="separator">
                </app-item-frame-separator>
            </ng-container>
        </div>
        <div class="outer">
            <ng-content></ng-content>
        </div>
    </div>
</div>